<template>
	<view >
		<view v-if="beforeLoading">
			<view class="padding-sm" v-if="dataList.length">
				<view class="order-item bg-white box-shadow" v-for="(item,index) in dataList" :key="index" @tap="turnDetail(item.id)">
					<view class="flex flex-direction">
					    <!-- 时间和状态 -->
					    <view class="order-top flex align-center solid-bottom padding-bottom-xs margin-bottom-sm">
							<view class="shop-box flex-sub" style="min-width: 0;">
								<text class="text-cut ">退款单号：{{item.afterNo}}</text>
							</view>
							<view class="margin-left" :class="item.status==4?'text-gray':item.status==1?'text-orange':item.status==3?'text-green':'text-blue'" >{{item.statusName}}</view>
						</view>
					    <!-- 商品内容 -->
						<view class="" v-for="(item2,index2) in item.afterInfos" :key="index2">
					    <view class="order-goods flex margin-bottom-sm" >
							<view class="order-goods-img margin-right ">
								<image :src="item2.image.split(',')[0]" mode=""></image>
							</view>
							<view class="flex-four" >
								<view class="mutiple-overflow  text-black text-df" ><text>{{item2.productName}}</text></view>
								<view class="flex-sub flex align-center " v-if="item2.goodsSkuDesc">
									<view class=""><text class="text-gray" >商品规格：{{item2.goodsSkuDesc}}</text></view>
								</view>
								<view class="flex flex-between ">
									<view class="text-df"> <text class="text-price">{{item2.price}}</text> </view>
									<view class=""> <text class="text-gray">×{{item2.num}}</text> </view>
								</view>
							</view>
						</view>
						</view>
						<view class="flex flex-between margin-top">
							<view class="text-gray text-df">时间：{{item.time}}</view>
							<view>退款金额：<text class="text-xl text-red text-price">{{item.price}}</text> </view>
						</view>
					</view>
				</view>
				<!-- <loading :loadType="loadType"></loading> -->
			</view>
			<view class="padding-lr" v-else>
				<view class="padding-xl margin-top bg-white radius-df flex align-center justify-around" style="height: 70vh;">
					<u-empty mode="order" text='暂无相关订单~'></u-empty>
				</view>
			</view>
			
		</view>
		<view class="" v-else>
			<u-empty text="暂无数据" iconSize="200" mode="order" class="flex justify-center align-center">
				<u-button slot="bottom" size="medium" type="primary" text="确定" style="margin:0 30upx;"
					@click="$u.route('/pages/good/goodsList/goodsList');">
					点击登录
				</u-button>
			</u-empty>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				beforeLoading:false,
				tabList:[
					{name:'全部',id:''},
					{name:'待支付',id:1},
					{name:'待发货',id:2},
					{name:'待收货',id:3},
					{name:'已完成',id:4},
					{name:'已关闭',id:5}
				],
				keywords:"",
				currentTab:'',
				dataList:[],
				loadType:3,
				currentPage:1,
				totalCount:0,
				scoreList:[],
				scoreModal:false,
				finishItem:{
					id:'',
					score:''
				},
				scrollLeft:0
			};
		},
		onLoad(e) {
			if(!uni.getStorageSync('token')){
				uni.navigateTo({
					url:'/pages/login/login'
				})
				return
			}
			this.currentTab=e.type?e.type:''
			this.scrollLeft = (Number(this.currentTab) - 1) * 87;
			this.getDatas()
		},
		onReachBottom() {
			if(this.dataList.length>=this.totalCount){
				this.loadType=2
			}else{
				this.currentPage++
				this.loadType=1
				this.getDatas()
			}
		},
		onPullDownRefresh() {
			this.getSearch()
		},
		methods:{
			getSearch(){
				this.currentPage=1
				this.getDatas()
			},
			getDatas(){
				let dataA={
					PageIndex:this.currentPage,
					PageSize:20,
					memberId:uni.getStorageSync('userInfo').id
				}
				this.beforeLoading=false
				this.$ajax.aftersaleorder(dataA).then(res=>{
					let tempData=res.data
					this.dataList=this.currentPage==1?[...tempData]:[...this.dataList,...tempData]
					this.totalCount=res.total
					this.beforeLoading=true
					uni.stopPullDownRefresh()
				})
			},
			tabChange(id){
				if(id!==this.currentTab){
					this.currentTab=id
					this.scrollLeft = (Number(this.currentTab) - 1) * 87;
					this.getSearch()
				}
			},
			//订单详情
			turnDetail(id){
				uni.navigateTo({
					url:'/pages/order/refundDetail/refundDetail?id='+id
				})
			},
			//取消订单
			cancelOrder(item){
				uni.showModal({
					title: '温馨提示',
					content: '您正在执行取消操作,取消之后该订单将会关闭,确认继续吗？',
					success: (res)=> {
						if (res.confirm) {
							this.$ajax.postCancelOrder({id:item.id,cancleReason:''}).then(res=>{
								this.$apis.msg('取消成功')
								this.getSearch()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//立即付款
			getOrderPay(id){
				this.$ajax.getOrderPayInfo({id:id}).then(res=>{
					if(res.data.data){
						let data=res.data.data
						uni.requestPayment({
						   provider: 'wxpay',
						   timeStamp: data.timeStamp,
						   nonceStr: data.nonceStr,
						   package: data.package,
						   signType: data.signType,
						   paySign: data.paySign,
						   appId: data.appId,
						    success: (e) => {
								this.$apis.msg('支付成功')
								setTimeout(()=>{
									this.getSearch()
								},500)
						    }, 
						    fail: (e) => {
								console.log('err:',e)
						        if(e.errMsg.match('微信:-2')){
						        	this.$apis.msg('您已经点击了取消支付!');
						        }
						    },
						})
					}else{
						this.$apis.msg(res.data.subMsg);
					}
					
					
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-item{
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		.circle-point{
			width: 15rpx;
			height: 15rpx;
		}
		.order-top{
			.shop-box{
				width: 100%;
				height: 35px;
				display: flex;
				align-items: center;
				&>image{
					width: 45rpx;
					height: 45rpx;
				}
				
			}
		}
		.order-t-left{
			max-width: 70%;
			image{
				width: 30rpx;
				height: 27rpx;
				vertical-align: middle;
			}
			text{
				vertical-align: middle;
			}
		}
		.order-goods{
			// &:not(:last-child){
			// 	border-bottom: 2rpx solid #eee;
			// }
			.order-goods-img{
				width: 180rpx;
				height: 180rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			.order-goods-detail{
				width: calc(100% - 214rpx);
				.order-goods-name{
					line-height: 1.5;
				}
			}
		}
	}
</style>
